<template>
  <zk-topBg paddingTop="30" :showBack="true" title="盘点单"></zk-topBg>
  <view id="addIMinventory">
    <scroll-view
      :style="{
        padding:
          iminventoryOtherStore.addOrdetailOrEdit === 'detail'
            ? 0
            : ' 0 0 54px',
      }"
      scroll-y>
      <!-- 基本信息 -->
      <view id="baseInfo" class="card">
        <view class="title">
          <zk-titleLeft>基本信息</zk-titleLeft>
        </view>
        <!-- 新增盘点时显示 -->
        <view
          v-if="
            iminventoryOtherStore.addOrdetailOrEdit === 'add' ||
            iminventoryOtherStore.addOrdetailOrEdit === 'edit'
          "
          class="form_box flex">
          <view class="form_item type">
            <view class="label flex">
              <view>盘点类型</view>
              <view class="color_red">*</view>
            </view>
            <view class="input">
              <uni-data-select
                v-model="InventoryType"
                text="DictName"
                value="DictCode"
                :localdata="iminventoryOtherStore.inventoryTypeList.TypeList">
              </uni-data-select>
            </view>
          </view>
          <view class="form_item data">
            <view class="label flex">
              <view> 盘点时间 </view>
            </view>
            <view class="input">
              <uni-datetime-picker type="datetime" v-model="InventoryDate" />
            </view>
          </view>
          <view class="form_item remark">
            <view class="label flex">
              <view>备注信息</view>
            </view>
            <view class="input">
              <uni-easyinput
                v-model="InventoryRemarks"
                placeholder="请输入内容"></uni-easyinput>
            </view>
          </view>
        </view>
        <!-- 详情时显示 -->
        <view v-else class="detail_box fs_14">
          <view class="msg_box">
            <view class="msg_item order flex">
              <view class="label color_text_gray">盘点单号</view>
              <view class="info flex color_black">
                <view class="text_overflow">
                  {{ iminventoryOtherStore.InventoryCode }}
                </view>
                <image @tap="clickToCopy" src="@/static/img/other/copy-g.png" />
              </view>
            </view>
            <view class="msg_item type flex">
              <view class="label color_text_gray">盘点类型</view>
              <view class="info flex color_black">
                <view>
                  {{
                    InventoryType == "InventoryAllocation"
                      ? "调拨盘点"
                      : "采购盘点"
                  }}
                </view>
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">盘点时间</view>
              <view class="info flex color_black">
                <view>{{ InventoryDate }}</view>
              </view>
            </view>
            <image
              v-if="
                iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                'CheckFail'
              "
              class="approval_img"
              src="@/static/img/other/approval-nopassed.png" />
            <image
              v-if="
                iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                'CheckNot'
              "
              class="approval_img"
              src="@/static/img/other/approval-pending.png" />
            <image
              v-if="
                iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                'CheckPass'
              "
              class="approval_img"
              src="@/static/img/other/approval-passed.png" />
          </view>
          <view class="msg_item flex">
            <view class="label color_text_gray">备注信息</view>
            <view class="info flex color_black">
              <view>{{ InventoryRemarks }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 审批流程 修改或详情时显示 -->
      <view
        v-if="iminventoryOtherStore.addOrdetailOrEdit === 'detail'"
        id="Approval_process"
        class="card">
        <view class="title">
          <zk-titleLeft>审批流程</zk-titleLeft>
        </view>
        <view class="approval_box flex fs_14">
          <view class="approval_item flex">
            <view class="label color_text_gray">发起人</view>
            <view class="info color_black">
              {{ iminventoryOtherStore.inventoryOderDetail.OperatorName }}
            </view>
          </view>
          <!-- 详情时显示 -->
          <view
            v-if="iminventoryOtherStore.addOrdetailOrEdit === 'detail'"
            class="approval_item flex">
            <view class="label color_text_gray">审批人</view>
            <view class="info color_black">
              {{ iminventoryOtherStore.inventoryOderDetail.ReplyerName }}
            </view>
          </view>
          <view class="approval_item flex">
            <view class="label color_text_gray">审批结果</view>
            <view
              class="info"
              :class="[
                iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                'CheckPass'
                  ? 'color_green'
                  : iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                    'CheckFail'
                  ? 'color_red'
                  : 'color_yellow',
              ]">
              {{
                iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                "CheckPass"
                  ? "审批通过"
                  : iminventoryOtherStore.inventoryOderDetail.ReplyStatus ==
                    "CheckFail"
                  ? "审批不通过"
                  : "审批中"
              }}
            </view>
          </view>
        </view>
        <!-- 详情时显示 -->
        <view
          v-if="iminventoryOtherStore.addOrdetailOrEdit === 'detail'"
          class="approval_item fs_14 flex">
          <view class="label color_text_gray">审批意见</view>
          <view class="info color_black">
            {{ iminventoryOtherStore.inventoryOderDetail.ReplyMsg }}
          </view>
        </view>
      </view>
      <!-- 物资信息  -->
      <view id="material_info" class="card">
        <view class="title">
          <zk-titleLeft>物资信息</zk-titleLeft>
          <view class="handle_box flex">
            <view class="searchBox">
              <input
                v-model="searchGoodsInfoParam"
                @confirm="searchGoodsInfoList"
                placeholder="请输入物资名称或编号"
                placeholder-class="input-placeholder" />
              <view @tap="searchGoodsInfoList" class="iconBut">
                <image
                  src="@/static/img/statistics/seachH.png"
                  class="tabIcon" />
              </view>
            </view>
          </view>
        </view>
        <view class="table_box">
          <!-- 头部 -->
          <view class="table_header">
            <view
              :class="[
                iminventoryOtherStore.addOrdetailOrEdit === 'detail'
                  ? 'detail'
                  : '',
              ]"
              class="table_header_item">
              <view class="collapse"></view>
              <!-- 表头 -->
              <view
                class="color_text_gray fs_16"
                v-for="(item, index) in iminventoryOtherStore.addtableHeader"
                :key="index">
                {{ item }}
              </view>
            </view>
          </view>
          <!-- 表格 -->
          <scroll-view
            style="height: 220px"
            @scrolltolower="InventoryOrderGoodsListScroll"
            scroll-y>
            <view
              class="table_body"
              v-if="iminventoryOtherStore.addGoodsInfoList.addGoodsList">
              <view
                v-for="(item, index) in iminventoryOtherStore.addGoodsInfoList
                  .addGoodsList"
                :key="index"
                :class="[
                  iminventoryOtherStore.addOrdetailOrEdit === 'detail'
                    ? 'detail'
                    : '',
                  item.isCollapse ? 'open' : 'close',
                ]"
                class="table_body_item">
                <!-- 折叠按钮 :style="{ height: item.isCollapse ? '120px' : '60px' }" -->
                <view
                  @tap="item.isCollapse = !item.isCollapse"
                  class="collapse">
                  <uni-icons
                    :type="item.isCollapse ? 'down' : 'right'"
                    color="#D8DDE9"
                    size="20" />
                </view>
                <view
                  :style="{ display: item.isCollapse ? 'flex' : 'none' }"
                  class="collapse_item">
                  <view class="content">
                    <view
                      v-if="
                        iminventoryOtherStore.addOrdetailOrEdit !== 'detail'
                      ">
                      <view class="fs_14 color_black">问题描述</view>
                      <view class="input_box">
                        <uni-easyinput
                          v-model="item.Problems"
                          placeholderStyle="color:#A8ABB2;font-size:14px;"
                          placeholder="请输入">
                        </uni-easyinput>
                      </view>
                    </view>
                    <view v-else class="detail_content flex">
                      <view class="fs_14 color_text_gray">问题描述</view>
                      <view class="fs_14 color_black">
                        {{ item.Problems || "-" }}
                      </view>
                    </view>
                  </view>
                  <view class="content">
                    <view
                      v-if="
                        iminventoryOtherStore.addOrdetailOrEdit !== 'detail'
                      ">
                      <view class="fs_14 color_black">处理办法</view>
                      <view class="input_box">
                        <uni-easyinput
                          v-model="item.Solutions"
                          placeholderStyle="color:#A8ABB2;font-size:14px;"
                          placeholder="请输入">
                        </uni-easyinput>
                      </view>
                    </view>
                    <view v-else class="detail_content flex">
                      <view class="fs_14 color_text_gray">处理办法</view>
                      <view class="fs_14 color_black">
                        {{ item.Solutions || "-" }}
                      </view>
                    </view>
                  </view>
                </view>
                <!--  -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsName }}
                  </view>
                </view>

                <!-- 批次 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsBatch }}
                  </view>
                </view>
                <!-- 有效期 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.ExpirationDate }}
                    </view>
                  </view>
                </view>
                <!-- 库位 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.BoxPath }}
                    </view>
                  </view>
                </view>

                <!-- 库存数量 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14">
                    {{ item.GoodsNumber }}
                  </view>
                </view>
                <!-- 实盘数量 -->
                <view class="table_body_item_cell text_overflow">
                  <view
                    class="fs_14 text_overflow"
                    v-if="iminventoryOtherStore.addOrdetailOrEdit === 'detail'">
                    {{ item.InventoryGoodsNumber }}
                  </view>
                  <view v-else class="fs_14 text_overflow">
                    <uni-easyinput
                      type="number"
                      v-model="item.InventoryGoodsNumber"
                      placeholder="请输入"
                      placeholder-style="color: #CCCCD3;font-size: 13px;">
                    </uni-easyinput>
                  </view>
                </view>
                <!-- 盘点差异 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.DifferenceStatusName }}
                  </view>
                </view>
                <!-- 单位 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.Units }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view
    v-if="
      iminventoryOtherStore.addOrdetailOrEdit === 'add' ||
      iminventoryOtherStore.addOrdetailOrEdit === 'edit'
    "
    w
    class="bottom_box">
    <zk-btn
      @handleTap="addOrEditInfo"
      class="save_btn"
      color="#08121E"
      backgroundColor="#EEEEEE">
      保存
    </zk-btn>
    <zk-btn @handleTap="shubmitAllInfo" class="submit_btn"> 提交</zk-btn>
  </view>
  <zk-tips></zk-tips>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useIMinventoryStore } from "@/stores/modules/IMcheck/IMcheck";
import { useIMinventoryOtherStore } from "@/stores/modules/IMcheck/IMcheckOther";
const iminventoryOtherStore = useIMinventoryOtherStore();
const IMinventorystore = useIMinventoryStore();
const InventoryType = ref(""); // 盘点类型
//获取时间
const getDate = (type: any) => {
  const date = new Date();
  let year: any = date.getFullYear();
  let month: any = date.getMonth() + 1;
  let day: any = date.getDate();
  //时分秒
  let hour: any = date.getHours();
  let minute: any = date.getMinutes();
  let second: any = date.getSeconds();
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (second < 10) {
    second = "0" + second;
  }
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year + 2;
  }
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
const startDate = getDate("start");
const endDate = getDate("end");
const InventoryDate = ref(getDate("")); // 盘点时间
const InventoryRemarks = ref(""); // 备注信息
// 页面加载时触发
onLoad(async (options: any) => {
  iminventoryOtherStore.getGoodsTypeList(); // 获取物资类型列表
  if (options?.InventoryCode) {
    if (options.Edit) {
      iminventoryOtherStore.addOrdetailOrEdit = "edit";
    } else {
      iminventoryOtherStore.addOrdetailOrEdit = "detail";
    }
    iminventoryOtherStore.InventoryCode = options.InventoryCode;
    await iminventoryOtherStore.getInventoryDetailData({
      InventoryCode: options.InventoryCode,
    }); // 获取盘点单详情
    InventoryDate.value =
      iminventoryOtherStore.inventoryOderDetail.InventoryTime || "";
    InventoryType.value =
      iminventoryOtherStore.inventoryOderDetail.InventoryType || "";
    InventoryRemarks.value =
      iminventoryOtherStore.inventoryOderDetail.InventoryRemarks || "";
    await iminventoryOtherStore.getAddGoods({}); // 获取盘点单物资列表
  } else {
    iminventoryOtherStore.clearData();
  }
  console.log(
    "addIMinventory onLoad",
    options,
    iminventoryOtherStore.addOrdetailOrEdit
  );
});
//点击复制
const clickToCopy = () => {
  uni.setClipboardData({
    data: iminventoryOtherStore.InventoryCode,
    success: () => {
      uni.showToast({
        title: "复制成功",
        duration: 1000,
        icon: "none",
        mask: true,
      });
    },
  });
};

// 保存或修改盘点单信息
const addOrEditInfo = async () => {
  if (InventoryType.value === "") {
    uni.showToast({
      title: "请选择盘点类型",
      duration: 500,
      icon: "none",
      mask: true,
    });
    return;
  }
  if (iminventoryOtherStore.addOrdetailOrEdit === "add") {
    // 新增盘点单
    await iminventoryOtherStore.addInventoryOrder({
      InventoryType: InventoryType.value,
      InventoryDate: InventoryDate.value,
      InventoryRemarks: InventoryRemarks.value,
    });
    iminventoryOtherStore.addOrdetailOrEdit = "edit";
  } else if (iminventoryOtherStore.addOrdetailOrEdit === "edit") {
    // 修改盘点单
    await iminventoryOtherStore.updateInventoryOrder({
      InventoryType: InventoryType.value,
      InventoryDate: InventoryDate.value,
      InventoryRemarks: InventoryRemarks.value,
    });
  }
};
// 提交盘点单
const shubmitAllInfo = async () => {
  if (InventoryType.value === "") {
    uni.showToast({
      title: "请选择盘点类型",
      duration: 500,
      icon: "none",
      mask: true,
    });
    return;
  }
  await iminventoryOtherStore.submitInventoryOrder({
    InventoryType: InventoryType.value,
    InventoryDate: InventoryDate.value,
    InventoryRemarks: InventoryRemarks.value,
  });
};
// 删除物资
const deleteItem = (item: any) => {
  console.log("deleteItem", item);
  uni.showModal({
    title: "提示",
    content: "删除后还需保存或提交，确认删除吗？",
    showCancel: true,
    cancelText: "取消",
    cancelColor: "#ccccd3",
    confirmText: "确定",
    confirmColor: "#32966f",
    success: (result) => {
      if (result.confirm) {
        iminventoryOtherStore.deleteInventoryGoods(item);
      }
    },
    fail: () => {},
    complete: () => {},
  });
};

//盘点单物资列表搜索物资信息列表
const searchGoodsInfoParam = ref("");
const searchGoodsInfoList = async () => {
  await iminventoryOtherStore.getAddGoods({
    searchParam: searchGoodsInfoParam.value,
  });
  pageNumInventoryOrder.value = 1;
};
//盘点单物资列表滚动到底部
const pageNumInventoryOrder = ref(1);
const InventoryOrderGoodsListScroll = async () => {
  if (
    iminventoryOtherStore.addGoodsInfoList.currPage <
    iminventoryOtherStore.addGoodsInfoList.totalPage
  ) {
    pageNumInventoryOrder.value++;
    await iminventoryOtherStore.getAddGoods({
      pageNum: pageNumInventoryOrder.value,
    });
  } else {
    uni.showToast({
      title: "没有更多数据了",
      duration: 1000,
      icon: "none",
      mask: true,
    });
  }
};
</script>

<style lang="scss" scoped>
#addIMinventory {
  position: relative;
  height: calc(552px - 64px);
  width: 98%;
  margin: auto;
  padding: 0 10px;
  z-index: 1;
  margin-top: 10px;
  padding: 10px;
  scroll-view {
    height: 100%;
    width: 100%;
  }
  .card {
    padding: 20px;
  }
  /********基本信息********/
  #baseInfo {
    position: relative;
    /********新增时form */
    .form_box {
      margin: 10px 0;
      .form_item {
        margin-right: 10px;
        &.type {
          width: 160px;
        }
        &.data {
          width: 200px;
        }
        &.remark {
          width: 400px;
        }
        .label {
          color: rgb(8, 18, 30);
          font-family: 思源黑体;
          font-size: 16px;
          margin: 5px 0;
        }
      }
    }
    /********详情时msg */
    .detail_box {
      .msg_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .msg_item {
          width: 35%;
          &.order {
            width: 40%;
          }
          &.type {
            width: 25%;
          }
          .info {
            margin-left: 5px;
            image {
              width: 14px;
              height: 14px;
              margin-left: 5px;
            }
          }
        }
        .approval_img {
          width: 80px;
          height: 80px;
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
      .msg_item {
        margin: 10px 0;
      }
    }
  }
  /********审批流程*******/
  #Approval_process {
    margin: 18px 0;
    .approval_box {
      margin: 10px 0;
      .approval_item {
        width: 33.33%;
      }
    }
    .approval_item {
      margin: 10px 0 10px;
      .label {
        margin-right: 10px;
      }
    }
  }
  /******物资信息*******/
  #material_info {
    margin: 18px 0;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .handle_box {
        .searchBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 240px;
          height: 40px;
          margin: 4px 0 8px;
          border-radius: 8px;
          padding: 9px 0 9px 12px;
          border: 1px solid rgb(228, 228, 228);
          background-color: #ffffff;
          margin: 0 10px;
          input {
            font-size: 14px;
          }

          .iconBut {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 38px;
            height: 38px;
            border-left: 1px solid rgb(228, 228, 228);

            image {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
    .table_box {
      padding: 16px 0 0 0;
      width: 100%;
      .table_header_item,
      .table_body_item {
        text-align: center;
        display: grid;
        grid-template-columns: 50px repeat(8, 1fr);
        grid-template-rows: 40px;
        align-items: center;
        padding: 10px;
      }
      .table_header_item {
        padding: 5px 10px !important;
        grid-template-rows: 30px;
      }
      .table_header_item.detail,
      .table_body_item.detail {
        grid-template-columns: 50px repeat(8, 1fr);
      }
      .table_header_item {
        width: 100%;
        border-radius: 6px;
        background: #f2f3f4;
        .title {
          color: #adafb8;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          text-align: center;
        }
      }
      .table_body {
        width: 100%;
        height: 100%;
        .table_body_item {
          position: relative;
          border-bottom: 1px solid rgb(244, 244, 244);
          &.open {
            height: 150px;
            &.detail {
              height: 100px;
            }
          }
          &.close {
            height: 60px;
          }
          /*****折叠面板******/
          .collapse {
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .collapse_item {
            position: absolute;
            width: 100%;
            display: flex;
            align-items: center;
            bottom: 0;
            left: 0;
            border-top: 1px solid rgb(244, 244, 244);
            .content {
              text-align: left;
              width: 50%;
              padding: 14px 20px;
              .input_box {
                margin: 5px 0;
              }
              .detail_content {
                view {
                  margin-right: 10px;
                }
              }
            }
          }
        }
        .table_body_item_cell {
          ::v-deep .uni-easyinput {
            .uni-easyinput__content {
              width: 80%;
              border: 1px solid rgb(228, 228, 228);
              border-radius: 8px;
              font-size: 14px;
            }
          }
          .data_input {
            display: flex;
            width: 80%;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 8px;
            padding: 10px 5px;
          }
        }
      }
    }
  }
}

/********* 底部按钮 *********/
.bottom_box {
  height: 72px;
  width: 100%;
  box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
  background: rgb(255, 255, 255);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  & > view {
    margin: 0 10px;
    justify-content: center;
  }
  .save_btn {
    width: 100px;
  }
  .submit_btn {
    width: 400px;
  }
}
</style>
